<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <meta charset="UTF-8" />
  <title>Omi</title>
</head>

<body>
  <script src="https://unpkg.com/omi"></script>
  <script>
    const { define, render, html } = Omi

    class Store {
      data = {
        count: 1
      }
      sub = () => {
        this.data.count--
      }
      add = () => {
        this.data.count++
      }
    }

    define('my-counter', _ => html`
  <div>
    <button onClick=${_.store.sub}>-</button>
    <span>${_.store.data.count}</span>
    <button onClick=${_.store.add}>+</button>
  </div>
`, {
        use: ['count'],
        //or using useSelf, useSelf will update self only, exclude children components
        //useSelf: ['count'], 
        css: `span { color: red; }`,
        installed() {
          console.log('installed')
        }
      })

    render(html`<my-counter />`, 'body', new Store)
  </script>

  <a href="https://github.com/Tencent/omi/" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
    <img src="//alloyteam.github.io/github.png" alt="">
  </a>
</body>

</html>